<div class="search-section-wrapper">
    <div class="search-input-wrapper">
        <input type="text" placeholder="{{inputPlaceholder$ | async}}" class="search-input" 
            ppSearchInput 
            [searchMinLength]="SEARCH_MIN_LENGTH"
            [useEnter]="searchUseEnter"
            (outCancel)="onCancel()"
            (outSearch)="onSearch($event)">
        <button class="fas fa-search"></button>
    </div>
    <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
</div>
<ng-container *ngIf="errorMessage || isEmpty; then guideText; else contents"></ng-container>
<ng-template #guideText>
    <p class="guide-text" [class.error-text]="errorMessage">{{errorMessage ? errorMessage : emptyText$ | async}}</p>
</ng-template>
<ng-template #contents>
    <pp-server-and-agent-list
        [funcImagePath]="funcImagePath"
        [serverKeyList]="filteredServerKeyList"
        [serverList]="filteredServerList"
        [agentId]="agentId"
        (outSelectAgent)="onSelectAgent($event)">
    </pp-server-and-agent-list>
</ng-template>
